<template>
  <div class="simple-test">
    <h1>简单测试页面</h1>
    <p>如果您能看到这个页面，说明路由配置正常。</p>
    
    <div class="test-buttons">
      <button @click="testConfig" class="btn">测试配置</button>
      <button @click="testManualUrl" class="btn">测试手动URL</button>
      <button @click="goToFormPost" class="btn">转到Form Post测试</button>
    </div>
    
    <div v-if="results.length > 0" class="results">
      <h3>测试结果:</h3>
      <ul>
        <li v-for="(result, index) in results" :key="index" :class="result.success ? 'success' : 'error'">
          {{ result.message }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { msalConfig, loginRequestWithFormPost } from '@/config/msal-config';

const router = useRouter();
const results = ref<Array<{success: boolean, message: string}>>([]);

onMounted(() => {
  addResult(true, '简单测试页面已加载');
});

function addResult(success: boolean, message: string) {
  results.value.push({ success, message });
  console.log(`${success ? '✅' : '❌'} ${message}`);
}

function testConfig() {
  addResult(true, '开始测试配置...');
  addResult(true, `客户端ID: ${msalConfig.auth.clientId}`);
  addResult(true, `重定向URI: ${msalConfig.auth.redirectUri}`);
  addResult(true, `响应模式: ${loginRequestWithFormPost.responseMode}`);
  addResult(true, `Scope: ${loginRequestWithFormPost.scopes.join(', ')}`);
}

function testManualUrl() {
  try {
    addResult(true, '测试手动URL构建...');
    
    const clientId = msalConfig.auth.clientId;
    const tenantId = import.meta.env.VITE_MS_365_TENANT_ID || '';
    const redirectUri = encodeURIComponent(msalConfig.auth.redirectUri || '');
    const scopes = encodeURIComponent(loginRequestWithFormPost.scopes.join(' '));
    const state = Math.random().toString(36).substring(2, 15);
    const nonce = Math.random().toString(36).substring(2, 15);
    
    const manualUrl = `https://login.microsoftonline.com/${tenantId}/oauth2/v2.0/authorize?` +
      `client_id=${clientId}&` +
      `scope=${scopes}&` +
      `redirect_uri=${redirectUri}&` +
      `response_type=code&` +
      `response_mode=form_post&` +
      `state=${state}&` +
      `nonce=${nonce}&` +
      `prompt=login&` +
      `client_info=1`;
    
    addResult(true, '手动URL构建成功');
    addResult(true, `URL包含response_mode=form_post: ${manualUrl.includes('response_mode=form_post')}`);
    
    // 显示URL（截取前100个字符）
    const shortUrl = manualUrl.substring(0, 100) + '...';
    addResult(true, `URL预览: ${shortUrl}`);
    
    // 复制到剪贴板
    navigator.clipboard.writeText(manualUrl).then(() => {
      addResult(true, 'URL已复制到剪贴板');
    }).catch(() => {
      addResult(false, '复制URL失败');
    });
    
  } catch (error: any) {
    addResult(false, `URL构建失败: ${error.message}`);
  }
}

function goToFormPost() {
  router.push('/test-formpost');
}
</script>

<style scoped>
.simple-test {
  padding: 2rem;
  max-width: 800px;
  margin: 0 auto;
}

.test-buttons {
  margin: 2rem 0;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.btn {
  padding: 10px 20px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}

.btn:hover {
  background: #0056b3;
}

.results {
  margin-top: 2rem;
  padding: 1rem;
  background: #f8f9fa;
  border-radius: 4px;
}

.results ul {
  list-style: none;
  padding: 0;
}

.results li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #dee2e6;
}

.results li:last-child {
  border-bottom: none;
}

.results li.success {
  color: #28a745;
}

.results li.error {
  color: #dc3545;
}
</style> 